@import "src/common/styles/base";

.mine-page {

  position: relative;
  button {
    background-color: #fff;
    padding: 0;
    margin: 0;
    // line-height: 1rpx;
    border: none;
    border-radius: 0;
    min-height: 0;
    /* 默认自带最小高度为40px  设置小于40px式不生效需要先清空默认的最小高度再设置高度*/
  }

  button::after {
    border: none;
    border-radius: 0;
  }


  .message {
    position: absolute;
    right: 31px;
    top: 0;
    z-index: 999;
    image {
      width: 44px;
      height: 44px;
    }

    .status {
      position: absolute;
      width: 31px;
      height: 31px;
      background: linear-gradient(90deg, #FE6E19 0%, #F62A21 100%);
      display: flex;
      align-items: center;
      right: -10px;
      top: -10px;
      justify-content: center;
      border-radius: 50%;
      color: #fff;
      font-size: 16px;
    }
  }
  .user-info {
    margin: 30px auto;
    display: flex;
    justify-content: space-between;
    padding: 0 30px;
    align-items: center;
    background-color: transparent;

    .header-img {
      width: 88px;
      height: 88px;
      border-radius: 50%;
    }

    .text {
      padding-left: 54px;
      font-size: 32px;
      font-weight: 600;
      color: rgba(51, 51, 51, 1);
      text-align: left;
      flex: 1;
    }

    .arrow {
      width: 13px;
      height: 24px;
      display: block;
    }
  }

  .logout {
    width: 688px;
    height: 92px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 7px 64px 0px rgba(0, 0, 0, 0.07);
    border-radius: 10px;
    margin: 30px auto;
    font-size: 30px;
    font-weight: 600;
    color: rgba(51, 51, 51, 1);
    line-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cell-area {
    box-sizing: border-box;
    width: 688px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 7px 64px 0px rgba(0, 0, 0, 0.07);
    border-radius: 10px;
    margin: 0 auto;
    height: auto;
    overflow: hidden;

    .sub-title {
      font-size: 32px;
      font-weight: 600;
      color: rgba(51, 51, 51, 1);
      line-height: 45px;
      padding-left: 25px;
      margin-top: 35px;
    }

    .cell-wrapepr {
      display: flex;

      align-items: center;
      margin-top: 28px;
      margin-bottom: 39px;

      .cell-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 25%;

        .icon {
          height: 44px;
          display: block;
          margin-bottom: 10px;
        }

        .text {
          font-size: 24px;
          font-weight: 600;
          color: rgba(153, 153, 153, 1);
          line-height: 33px;
        }
      }
    }
  }

  .list-wrapper {
    width: 688px;
    margin: 20px auto;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 7px 64px 0px rgba(0, 0, 0, 0.07);

    .list-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 625px;
      margin-left: 33px;
      border-bottom: 1px solid #f2f2f2;
      height: 91px;

      .icon {
        height: 36px;
        display: block;
        margin-right: 8px;
      }

      .text {
        font-size: 30px;
        font-weight: 600;
        color: rgba(51, 51, 51, 1);
        line-height: 42px;
        text-align: left;
        flex: 1;
      }

      .arrow {
        width: 13px;
        height: 24px;
        display: block;
      }

      &:last-child {
        border-bottom: none;
      }
    }
  }
}
